<template>
	<view class="loading-com">
		<div class="loading">
			<view class="icon">
				<image class="img" mode="widthFix" src="/static/img/loading/loading.svg"></image>
			</view>
			<view class="text">{{text}}</view>
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			text: {
				type: String,
				default: "يۈكلىنىۋاتىدۇ..."
			}
		},
		data() {
			return {}
		},
	}
</script>

<style lang="scss" scoped>
	.loading-com {
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, .7);
		z-index: 6;

		.loading {
			overflow: hidden;
			text-align: center;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: max-content;
			height: max-content;

			.icon {
				width: 60px;
				margin: 0 auto;

				.img {
					width: 100%;
					display: block;
				}
			}

			.text {
				overflow: hidden;
				text-align: center;
				direction: rtl;
			}
		}
	}
</style>